$(function () {
  var dom = document.getElementById("container4");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  // Generate data
  var category = [];
  var dottedBase = +new Date();
  dottedBase -= 3600 * 24 * 1000 * 20;
  var lineData = [];
  var barData = [];

  for (var i = 0; i < 20; i++) {
    var date = new Date(dottedBase += 3600 * 24 * 1000);
    category.push([
      date.getFullYear(),
      date.getMonth() + 1,
      date.getDate()
    ].join('-'));
    var b = vm.msgCnt[i].msg;
    var d = vm.msgCnt[i].alm;
    barData.push(b)
    lineData.push(d + b);
  }


  // option
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['处理数', '报警数'],
      textStyle: {
        color: '#ccc'
      }
    },
    xAxis: {
      data: category,
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      }
    },
    yAxis: {
      splitLine: {show: false},
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      }
    },
    series: [{
      name: 'line',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 15,
      data: lineData
    }, {
      name: '报警数',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: '#14c8d4'},
              {offset: 1, color: '#43eec6'}
            ]
          )
        }
      },
      data: barData
    }, {
      name: '处理数',
      type: 'bar',
      barGap: '-100%',
      barWidth: 10,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: 'rgba(20,200,212,0.5)'},
              {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
              {offset: 1, color: 'rgba(20,200,212,0)'}
            ]
          )
        }
      },
      z: -12,
      data: lineData
    }, {
      name: 'dotted',
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        normal: {
          color: '#0f375f'
        }
      },
      symbolRepeat: true,
      symbolSize: [12, 4],
      symbolMargin: 1,
      z: -10,
      data: lineData
    }]
  };
  ;
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
})
